<template>
  <div>
    <Title title="学生分布情况"></Title>
    <div class="top_item" id="main"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import dayjs from 'dayjs'
import { getstudent } from '../../request/index'
import Title from '../commont/Title.vue'
let option = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    textStyle: {
      color: '#fff',
      fontSize: '12px'
    },
    icon: 'circle',
    data: []
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    min: 0,
    max: 3000,
    type: 'value'
  },
  series: [
    {
      symbol: 'none',
      smooth: true,
      name: '运动区',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    }
  ]
}
onMounted(() => {
  var chartDom = document.getElementById('main')
  var myChart = echarts.init(chartDom)
  //下边时间
  const sj = () => {
    let kk = []
    let time = +new Date()
    for (let i = 0; i < 7; i++) {
      kk.unshift(dayjs(time).format('HH:mm:ss'))
      time -= 2 * 60 * 1000
    }
    option.xAxis.data = kk
  }
  //实时更新数据
  const ws = new WebSocket('ws://localhost:3002/bigscreen/websockets?id==555')
  const onmessage = (e) => {
    const data = JSON.parse(e.data)

    option.legend.data = data.legendData
    option.series = data.seriesData.map((item, index) => {
      return {
        name: data.legendData[index],
        type: 'line',
        stack: 'Total',
        data: item,
        //去掉小圆点
        symbol: 'none',
        //曲线
        smooth: true
      }
    })
    sj()
    myChart.setOption(option)
  }
  ws.addEventListener('message', onmessage)
  //后台请求数据
  // getstudent().then((res) => {
  //   console.log(res)
  // if (res.data.code === 200) {
  //   option.legend.data = res.data.data.result[0].legend.data
  //   option.series = res.data.data.result[0].series.map((item, index) => {
  //     return {
  //       symbol: 'none',
  //       smooth: true,
  //       name: item.name,
  //       type: 'line',
  //       stack: 'Total',
  //       data: item.data
  //     }
  //   })
  //   sj()
  //   myChart.setOption(option)
  // }
  // })
  myChart.setOption(option)
  //三秒
  setInterval(() => {
    // var myChart = echarts.init(chartDom)
    sj()
    // myChart.setOption(option)
  }, 3000)
  //适配
  const onresize = () => {
    let fontSize = ((window.innerWidth / 10) * 12) / 196
    option.legend.textStyle.fontSize = fontSize
    option.legend.itemWidth = fontSize
    option.legend.itemHeight = fontSize
    myChart.resize()
  }
  onresize()
  window.addEventListener('resize', onresize)
})
</script>


<style scoped lang='scss'>
</style>
